<template>
<div class="app-container">
  <div style="margin-top: 1px">
    <el-row>
      <el-col span = '18'>
        <el-form :model="listQuery" inline size="small" label-width="80px" >
          <el-form-item label="关键词:">
            <el-input style="width: 150px;" v-model="listQuery.keyword" placeholder="输入关键词"></el-input>
          </el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleSearch"
          >
            搜索
          </el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>

  <div class="table-container">
    <el-table ref="studentTable"
              :data="list"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              v-loading="listLoading"
    >
      <el-table-column label="学生昵称"  align="center" min-width="15%">
        <template slot-scope="scope">
          <p>{{scope.row.name}}</p>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" min-width="5%">
        <template slot-scope="scope">
          {{scope.row.sex === 0 ? '男': '女'}}
        </template>
      </el-table-column>
      <el-table-column label="移动电话"  align="center" min-width="20%">
        <template slot-scope="scope">
         {{scope.row.tel}}
        </template>
      </el-table-column>
      <el-table-column label="QQ" align="center" min-width="20%">
        <template slot-scope="scope">
          {{scope.row.qq}}
        </template>
      </el-table-column>
      <el-table-column label="地址" align="center" min-width="20%">
        <template slot-scope="scope">
         {{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" min-width="20%">
        <template slot-scope="scope">
          <el-tooltip :enterable = false class="item" effect="light" content="编辑" placement="top">
            <el-button
              size="mini"
              icon = "el-icon-edit-outline"
              @click="handleUpdateProduct(scope.$index, scope.row)"
              circle>
            </el-button>
          </el-tooltip>
          <el-tooltip :enterable = false class="item" effect="light" content="重置密码 " placement="top">
            <el-button
              size="mini"
              type="primary"
              icon = "el-icon-refresh"
              @click="handleResetPwd(scope.$index, scope.row)"
              circle>
            </el-button>
          </el-tooltip>
          <el-tooltip :enterable = false class="item" effect="light" content="删除" placement="top">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon = "el-icon-delete"
              circle>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="pagination-container">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes,prev, pager, next,jumper"
      :page-size="listQuery.pageSize"
      :page-sizes="[5,10,15]"
      :current-page.sync="listQuery.pageNum"
      :total="total">
    </el-pagination>
  </div>

</div>
</template>

<!--TODO: 完善学生管理页面-->

<script>
import {
  getStudentList,
  updateDeleteStatus,
  getGroupList,
  updateStudent,
  uploadExcel,
  createStudent,
  getDefaultTerm, fetchAllTerms, searchStudent
} from '../../../api/admin'
const defaultListQuery = {
  keyword: null,
  id: -1,
  pageNum: 1,
  pageSize: 10,
};
const defaultEditStuInfo = {
  id: null,
  dialogVisible: false,
  studentNum: null,
  classname: null,
  name: null,
  phone: null,
  qq: null,
  groupId: null
};

export default {
  name: "index",
  data(){
    return {
      editStuInfo: defaultEditStuInfo,
      queryModel: {keyword: null},
      list: null,
      listLoading: null,
      operateType: null,
      operateTypeDialog: 'modify', // 创建，修改 modify, create
      operates: [
        {
          label: '删除',
          value: 'delete'
        }
      ],
      listQuery: Object.assign({}, defaultListQuery),
      total: null,
      multipleSelection: [],
      modifyRowIndex: null,
      terms:[],
      uploadFile: null,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
      this.$message({
        message: '查询成功',
        type: 'success',
        duration: 1000
      })
    },
    handleReSearch() {
      this.listQuery.keyword = '';
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleUpdateProduct(index, row) {
      this.operateTypeDialog = 'modify';
      this.editStuInfo = {...row, dialogVisible: true}
      this.modifyRowIndex = index;
    },
    handleDelete(index, row) {
      this.$confirm('是否要进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        ids.push(row.id);
        this.updateDeleteStatus(1,ids);
      });
    },
    handleResetPwd(index, row){

    },
    updateDeleteStatus(deleteStatus, ids) {
      let params = new URLSearchParams();
      params.append('ids', ids);
      params.append('deleteStatus', deleteStatus);
      updateDeleteStatus(params).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000
        });
        // 当前页面全部删除 同时 是最后一页. 就自动的跳转到前一页
        getStudentList(this.listQuery).then(res => {
          if (res.data.list.length === 0 && this.list.pageNum>=1) {
            this.listQuery.pageNum--;
            this.getList();
          }
          else {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleBatchOperate() {
      this.operateType = 'delete'
      if(this.multipleSelection==null||this.multipleSelection.length<1){
        this.$message({
          message: '请选择要操作的学生',
          type: 'warning',
          duration: 1000
        });
        return;
      }
      this.$confirm('是否要删除选中学生?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids=[];
        this.multipleSelection.forEach(item => ids.push(item.id));
        switch (this.operateType) {
          case this.operates[0].value:
            this.updateDeleteStatus(1, ids);
            break;
          default:
            break;
        }
      });
    },
    getList() {
      this.listLoading = 1;
      searchStudent(this.listQuery).then(resp => {
        this.listLoading = false;
        this.list = resp.data.list;
        this.total = resp.data.total;
      })
    },
    handleChange(file) {
      this.uploadFile = file.raw;
      this.$refs["upload-button"].disabled = false;
      return false;
    },
    create() {
      this.operateTypeDialog = "create";
    },
    doCreate() {
      createStudent(this.editStuInfo).then(resp => {
        this.$message({
          message: '创建成功',
          type: 'success',
          duration: 1000
        });
        this.getList();
        this.editStuInfo.dialogVisible = false;
      })
    },
  }
}
</script>

<style scoped>
.upload-excel {

}
</style>
